<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>采购信息</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-input-number__decrease, .el-input-number__increase{
            position: absolute;
            z-index: 1;
            top: 1px;
            width: 50px;
            height: 38px;
            text-align: center;
            background: #F5F7FA;
            color: #606266;
            cursor: pointer;
            font-size: 13px;
        }
        .el-icon-minus:before {
            content: "\e6d8";
            font-family: element-icons !important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 3;
            vertical-align: baseline;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .el-icon-plus:before {
            content: "\e6d9";
            font-family: element-icons !important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 3;
            vertical-align: baseline;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
        }
        .el-col-lg-6 {
            width: 100%;
        }
        .el-result {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-direction: column;
            flex-direction: column;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 34px 2px;
        }
    </style>
</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="purchaseInfoVo" class="demo-form-inline" ref="searchForm">
        <el-form-item label="采购信息编号">
            <el-input v-model="purchaseInfoVo.id" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="purchaseInfoVo.staffname" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="applyPurchaseList">申请采购</el-button>
        </el-form-item>
    </el-form>

   <!--采购信息列表-->
    <el-table
            :data="caidata"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="采购编号"

        >
        </el-table-column>
        <el-table-column
                prop="staff.staffname"
                label="负责人">
        </el-table-column>
        <el-table-column
                prop="play"
                label="采购计划"

        >
        </el-table-column>
        <el-table-column
                prop="purchaseData"
                label="申请时间"

        >
        </el-table-column>
        <el-table-column
                    prop="sal"
                    label="申请金额"
        >
        </el-table-column>
        <el-table-column

                prop="status"
                label="采购情况">
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.status==1"
                        effect="dark">
                    已购买
                </el-tag>
                <el-tag
                        type="info"
                        v-else
                        effect="dark">
                   未购买
                </el-tag>
            </template>
        </el-table-column>


        <el-table-column
                fixed="right"
                label="操作"
                width="300">
            <template slot-scope="scope">
                <el-button @click="deleterole(scope.row)" type="primary" icon="el-icon-delete"></el-button>
                <el-button @click="handleEdit(scope.row)" type="info" plain>采购详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--申请弹窗-->
    <el-dialog title="采购申请" :visible.sync="dialogFormVisible" center width="30%">
        <el-steps :active="active">
            <el-step title="编写基本信息" icon="el-icon-edit"></el-step>
            <el-step title="编写详细信息" icon="el-icon-reading"></el-step>
            <el-step title="提交申请" icon="el-icon-position"></el-step>
        </el-steps>

        <%--采购申请编写基本信息表单--%>
        <el-form :model="purchaseForm"  ref="purchaseForm"  :rules="rules"  label-width="80px" v-if="this.active===0">
            <el-form-item label="采购计划" prop="apply">
                <el-input v-model="purchaseForm.apply"></el-input>
            </el-form-item>
            <el-form-item label="采购预算" prop="sal">
                <el-input v-model="purchaseForm.sal" @blur="blur1"></el-input>
            </el-form-item>
            <el-form-item label="申请时间"  prop="purchaseData">
                <el-date-picker
                        v-model="purchaseForm.purchaseData"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>

        </el-form>


        <%--采购申请编写详细信息表单--%>
        <el-form ref="bookForm" :rules="rules" :model="bookForm"  label-width="80px" v-if="this.active===1">
            <el-form-item label="图书名" prop="name">
                <el-input v-model="bookForm.name"></el-input>
            </el-form-item>
            <el-form-item label="图书类型" prop="booktypeId" >
                    <el-select v-model="bookForm.booktypeId" placeholder="请选择">
                        <el-option
                                v-for="item in bookTypes"
                                :key="item.value"
                                :label="item.booktypes"
                                :value="item.booktypeId">
                        </el-option>
                    </el-select>

            </el-form-item>
            <el-form-item label="图书单价" prop="bookPrice">
                <el-input v-model.number="bookForm.bookPrice" @blur="blur2"></el-input>
            </el-form-item>
            <el-form-item label="购买数量" prop="bookCount">
                <el-input-number v-model.number="bookForm.bookCount" :step="1" step-strictly @blur="blur3"></el-input-number>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer" v-if="this.active===0">
            <el-button type="primary"  @click="next">下一步</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>

        <div slot="footer" class="dialog-footer" v-if="this.active===1">
            <el-button type="success"  @click="back">返回上一步</el-button>
            <el-button type="primary"  @click="next">继续添加</el-button>
            <el-button @click="submitApply">提交</el-button>
        </div>

        <el-row v-if="this.active==2">
            <el-col :sm="12" :lg="6">
                <el-result icon="success" title="提交申请成功" subTitle="请根据提示进行操作">
                    <template slot="extra">
                        <el-button type="primary" size="medium" @click="backView">返回</el-button>
                    </template>
                </el-result>
            </el-col>
        </el-row>

    </el-dialog>

    <!--详细信息-->
    <el-drawer
            ref="nvFDrawer"
            title="详细信息"
            :visible.sync="drawer"
            size="60%"
            :with-header="true">

       <%-- <el-button type="primary" @click="addBooksShow" v-if="status===0">添加购买图书</el-button>--%>
        <el-button type="primary" @click="purchaseBook" v-if="status===0">购买图书</el-button>
        <el-table
                :data="purchaseBookInfo"
                border
                style="width: 100%">
            <el-table-column
                    width="80px"
                    prop="id"
                    label="编号"

            >
            </el-table-column>
            <el-table-column
                    width="150px"
                    prop="booksName"
                    label="图书名"

            >
            </el-table-column>
            <el-table-column
                    width="150px"
                    prop="booktype.booktypes"
                    label="图书类型">
            </el-table-column>
            <el-table-column
                    prop="booksCount"
                    width="150px"
                    label="购买数量"
            >
            </el-table-column>
            <el-table-column
                        prop="bookPrice"
                        width="150px"
                        label="价格"
            >
            </el-table-column>
            <el-table-column
                    v-if="status===0"
                    label="操作"
                   >
                <template slot-scope="scope">
                    <el-button @click="deletePurchaseBookInfo(scope.row)" type="primary" icon="el-icon-delete"></el-button>
                    <el-button @click="editPurchaseBookInfo(scope.row)" type="info" plain>编辑</el-button>
                </template>
            </el-table-column>

        </el-table>


    </el-drawer>


    <!----编辑图书信息----->
    <el-dialog :title="flg?'修改采购图书信息':'添加图书'" :visible.sync="editFormVisible" center width="30%">
        <el-form ref="editBookForm" :rules="rules" :model="editBookForm"  label-width="80px">
            <el-form-item label="采购编号" prop="purchaseinfoId">
                <el-input v-model="editBookForm.purchaseinfoId" disabled=""></el-input>
            </el-form-item>
            <el-form-item label="图书名" prop="booksName">
                <el-input v-model="editBookForm.booksName"></el-input>
            </el-form-item>
            <el-form-item label="图书类型" prop="booktypeId" >
                <el-select v-model="editBookForm.booktypeId" placeholder="请选择">
                    <el-option
                            v-for="item in bookTypes"
                            :key="item.value"
                            :label="item.booktypes"
                            :value="item.booktypeId">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="图书单价" prop="bookPrice">
                <el-input v-model.number="editBookForm.bookPrice"></el-input>
            </el-form-item>
            <el-form-item label="购买数量" prop="booksCount">
                <el-input-number v-model.number="editBookForm.booksCount" :step="1" step-strictly></el-input-number>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer" >
            <el-button @click="editFormVisible = false">取 消</el-button>
            <el-button type="primary"  @click="submitPurchaseBookInfo" v-if="flg">提交</el-button>
            <el-button type="primary"  @click="addPurchaseBookInfo" v-else>添加</el-button>
        </div>


    </el-dialog>


</div>

</body>
<script>

    let vm=new Vue({
        el:"#app",
        data:{
            objList:{
                apply:"",
                sal:0,
                purchaseData:undefined,
                bookList:[]
            },
            //采购信息数据
            caidata:[],
            //当前的页码
            current: 1,
            //每页的条数
            pageSize: 5,
            //总条数
            total: 0,
            drawer:false,
            purchaseInfoVo:{
                id:undefined,
                staffname:undefined,


            },
            //是否显示申请弹窗
            dialogFormVisible:false,
            purchaseForm:{},
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            value1: '',
            active: 0,
            bookForm:{},
            bookList:[],
            bookTypes:[],
            rules:{
                apply:[
                    { required: true, message: '请输入采购计划', trigger: 'blur' },
                ],
                sal:[
                    { required: true, message: '请输入采购预算', trigger: 'blur' },
                ],
                purchaseData:[
                    { required: true, message: '请输入预采购日期', trigger: 'blur' },
                ],
                name:[
                    { required: true, message: '请输入图书名', trigger: 'blur' },
                ],
                booksName:[
                    { required: true, message: '请输入图书名', trigger: 'blur' },
                ],
                booktypeId:[
                    {
                        required: true, message: '请选择图书类型', trigger: 'blur'
                    }
                ],
                bookPrice:[
                    { required: true, message: '单价不能为空'},
                    { type: 'number', message: '单价必须为数字值'}

                ],
                bookCount:[
                    { required: true, message: '数量不能为空'},
                    { type: 'number', message: '数量必须为数字值'}
                ],
                booksCount:[
                    { required: true, message: '数量不能为空'},
                    { type: 'number', message: '数量必须为数字值'}
                ],




            },
            purchaseBookInfo:[],
            purchaseInfoId:{
                id:0,
                status:0
            },
            editFormVisible:false,
            editBookForm:{},
            flg:true,
            status:0,
            sum:0,
            count:0,



        },
        created(){
            this.loadPurchaseInfo()
        },
        methods:{
            //
            blur1(){
                if(this.purchaseForm.sal!=""||this.purchaseForm.sal!=undefined) {
                    this.sum = this.purchaseForm.sal
                }
            },

            blur2(){
                this.count=Math.floor(this.sum/this.bookForm.bookPrice)
                this.bookForm.bookCount=this.count

            },
            blur3(){
               if(this.count<this.bookForm.bookCount){
                   this.$message.error("购买金额超过申请资金,最多可以购买"+this.count+"本图书");
                   this.bookForm.bookCount=this.count
               }
            },
            //提交申请
            submitApply(){
                this.bookList.push(this.bookForm)
                this.objList.apply=this.purchaseForm.apply
                this.objList.sal=this.purchaseForm.sal
                this.objList.purchaseData=this.purchaseForm.purchaseData
                this.objList.bookList=this.bookList
                axios.post("/purchaseInfo/addPurchaseInfo",this.objList).then(res=>{
                           if(res.data.code===200){
                               this.$message.success(res.data.msg);
                               this.active=2;
                           }
                })



            },

            //加载图书类型
            loadBookType() {
                   axios.get("/book/booktype").then(res=>{
                       this.bookTypes=res.data.data
                   })
            },

            //加载采购信息
            loadPurchaseInfo(){
                axios.post("/purchaseInfo/getAll/"+this.current+"/"+this.pageSize,this.purchaseInfoVo).then(res=>{
                    if(res.data.code===200){
                        this.caidata=res.data.data.list
                        this.total=res.data.data.total
                    }

                })
            },
            //删除采购信息
            deleterole(row){
                axios.get("/purchaseInfo/deletePurchaseInfoId/"+row.id).then(res=>{
                    if(res.data.code===200) {
                        this.$message.success(res.data.msg);
                        this.loadPurchaseInfo()
                    }
                })

            },
            //采购详情
            handleEdit(row){
                this.drawer=true
                this.purchaseInfoId.id=row.id
                this.status=row.status;
                axios.get("/purchaseBookInfo/selectByPurchaseinfoId/"+row.id).then(res=>{
                    this.purchaseBookInfo=res.data.data
                })
            },

            //购买图书
            purchaseBook(){
                console.log(this.purchaseInfoId.id)
                 axios.get("/purchaseInfo/purchaseBook/"+this.purchaseInfoId.id).then(res=>{
                     if(res.data.code===200){
                         this.$refs.nvFDrawer.closeDrawer()
                         this.$message.success(res.data.msg);
                         this.loadPurchaseInfo()
                     }
                 })
            },


            handleSizeChange(val) {
                this.pageSize = val;
                this.loadPurchaseInfo();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.loadPurchaseInfo();
            },
            //根据采购编号和采购人员查询信息
            search(){
                this.current=1
                this.loadPurchaseInfo()
                this.purchaseInfoVo.id=''
                this.purchaseInfoVo.staffname=''

            },
            //显示申请采购列表
            applyPurchaseList(){
                this.dialogFormVisible=true
                this.loadBookType()
            },
            //返回上一步
            back(){
                this.active--;
            },
            //下一步
            next() {
                if(this.active===0) {
                    this.$refs.purchaseForm.validate((valid) => {
                        if (valid) {
                            this.loadBookType()
                            this.active=1
                        } else {
                            return false;
                        }
                    });
                }else if (this.active === 1) {
                    if(this.sum>0) {
                        this.$refs.bookForm.validate((valid) => {
                            if (valid) {
                                this.$confirm('是否继续添加购买书单?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    if(this.bookForm.bookCount!=0){
                                        this.bookList.push(this.bookForm)
                                        this.sum -= this.bookForm.bookCount * this.bookForm.bookPrice
                                        this.bookForm = {}
                                        this.active = 1
                                    }else {
                                        this.$message.error("添加失败,添加的图书数量不能为0");
                                        this.bookForm=this.bookList[this.bookForm.length-1]
                                        this.back();
                                    }


                                }).catch(() => {
                                    this.$message({
                                        type: 'info',
                                        message: '取消添加'
                                    });
                                    this.bookForm = {}
                                    this.num = 0

                                });
                            } else {
                                return false;
                            }
                        });
                    }else {
                        this.$message.error("抱歉,已超出申请资金,请重新输入信息");
                        this.bookForm={}

                    }

                }else if (this.active++ > 2) {
                    this.active = 0;
                }
            },

            //返回采购信息页面
            backView(){
                this.dialogFormVisible=false
                this.loadPurchaseInfo()
            },

            //根据PurchaseBookInfoId删除信息
            deletePurchaseBookInfo(row){
                axios.get("/purchaseBookInfo/deleteById/"+row.id).then(res=>{
                    if(res.data.code===200){
                        this.handleEdit(this.purchaseInfoId)

                    }
                })
            },

            //编辑采购图书信息
            editPurchaseBookInfo(row){
                this.loadBookType()
                this.editFormVisible=true;
                this.flg=true;
                this.editBookForm=row
            },

            //提交修改过图书信息
            submitPurchaseBookInfo(){
                this.$refs.editBookForm.validate((valid) => {
                    if (valid) {
                        axios.post("/purchaseBookInfo/updateById",this.editBookForm).then(res=>{
                            if(res.data.code===200){
                                this.editFormVisible=false
                                this.handleEdit(this.purchaseInfoId)
                            }
                        })
                    } else {
                        return false;
                    }
                });


            },

            //显示添加图书页面
            addBooksShow(){
                this.loadBookType()
                this.editBookForm={};
                this.editBookForm.purchaseinfoId=this.purchaseInfoId.id
                this.editFormVisible=true;
                this.flg=false;
            },

            //添加图书
            addPurchaseBookInfo(){
                this.$refs.editBookForm.validate((valid) => {
                    if (valid) {
                        let count = this.find(this.purchaseBookInfo, this.editBookForm.booksName,this.editBookForm.bookPrice)
                        if(count===-1){
                            axios.post("/purchaseBookInfo/addBookInfo",this.editBookForm).then(res=>{
                                if(res.data.code===200){
                                    this.editFormVisible=false
                                    this.handleEdit(this.purchaseInfoId)
                                }
                            })
                        }else {
                                this.editFormVisible = false
                                this.editBookForm.booksCount += this.purchaseBookInfo[count].booksCount
                                this.editBookForm.id = this.purchaseBookInfo[count].id
                                axios.post("/purchaseBookInfo/updateById", this.editBookForm).then(res => {
                                    if (res.data.code === 200) {
                                        this.handleEdit(this.purchaseInfoId)
                                    }
                                })

                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },

            //查找
            find(books,bookName,bookPrice){
                for (let i=0;i<books.length;i++){
                    if(books[i].booksName===bookName){
                        if(books[i].bookPrice===bookPrice){
                            return i;
                        }
                        return -1;

                    }
                }
                return -1;

            }



        }

    })
</script>
</html>
